Vue项目在本地如何调试微信sdk

2023-10-14 21:13| 来源: 网络整理| 查看: 265

安装weixin-js-sdk npm i weixin-jk-sdk 全局注入

在main.js中引入

import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx 注册sdk

详情请移步微信官方sdk文档

最近花了198块钱搞了个配置较高的服务器来学习 node 及对应的框架，现在：腾讯云 2核4g8m，198元/3年

下面代码是我的一个微信sdk注册

methods: { /** * 注册微信sdk */ onRegisterWeixinSdk() { // 因为$wx刚刚已经在全局注测了，所以在这里我们是可以直接this去调用的，sdk所需要的参数可以在获取sdk参数的接口里面去调用 this.$wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId, // 必填，公众号的唯一标识 timestamp, // 必填，生成签名的时间戳 nonceStr, // 必填，生成签名的随机串 signature,// 必填，签名 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表 }) }, /** * 设置微信分享参数 */ onRegisterWeixinShare() { this.$wx.ready(() => { // 分享给朋友 this.$wx.updateAppMessageShareData({ title, // 分享标题 desc, // 分享描述 link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl, // 分享图标 success () { // 设置成功 } }) // 分享到朋友圈 this.$wx.updateTimelineShareData({ title, // 分享标题 desc, // 分享描述 link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl, // 分享图标 success () { // 设置成功 } }) }) }, } 修改hosts文件

不知道hosts文件目录的童鞋请自行百度

# 在hosts文件里增加这一行代码，将本地127.0.0.1指向线上域名，这个域名一定要是微信公众号里面的js安全域名（这里以我自己得域名举例） 127.0.0.1 ydhtml.com

这里默认我设置vue服务是 8888 端口

设置host完成之后这个时候，我们本地就可以输入 ydhtml.com:8888 访问我们本地的项目了设置nginx反向代理 nginx安装不懂得童鞋请自行下载安装噢

ps：一般我们的vue项目端口是8080，也可能是 8787 8888，这个时候我们就需要使用nginx进行反向代理，如果我们不设置代理的话，我们访问这个域名 ydhtml.com:8888 就跟我们的js安全域名不一致了，还不美观，所以我们就需要用到反向代理，去将 ydhtml.com:8888 映射成 ydhtml.com

配置nginx文件

在nginx的根目录下，然后进入 conf 文件夹，然后创建一个文件夹 servers，再新建一个文件这个文件名要跟你设置hosts name 一致，这里我的文件名是 ydhtml.com，然后打开文件，将以下内容复制进去

记得将端口和域名修改成你自己的，然后保存

upstream ydhtml.com { server 127.0.0.1:8888; } server { listen 80 ; server_name ydhtml.com localhost; index index.html index.htm; # root /home/workspace/ft-portal-admin/release-current/; location / { proxy_pass http://ydhtml.com; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; } } 最后重启nginx 下载微信开发者工具

选择公众号网页调试，再输入域名 ydhtml.com 这个时候只要nginx重启成功就可以不需要带端口号了，最后就可以在控制台里面愉快的调试啦

小提示安卓貌似不支持最新的微信sdk版本（1.6.0）安卓在微信中默认会带有 from=groupmessage or from=singlemessage 参数这里针对带有参数的情况下，如何去解决这个问题，代码如下 /** * 清除微信分享自带的参数 * @param { String } link */ function clearWxLinkParams(link) { if (link.includes('from=') || link.includes('isappinstalled=')) { const newLink = link.replace(/&from=((.+?)*)/g, '') location.replace(newLink) } } clearWxLinkParams(location.href)

【本文地址】

公司简介

联系我们